<template>
    <el-dialog :width="width" :title="title" :visible.sync="dialogFormVisible" :before-close="hideDialog"
               :close-on-click-modal="false">
        <div slot="title">
            <div class="page_title">{{title}}</div>
        </div>
        <div class="form_create">
            <el-form :model="form" :label-width="formLabelWidth" ref="updateDialogForm" size="small">
                <CustomFormItem v-for="column in columns" :key="column.label" :rules="column.rules"
                                :label="column.label"
                                :fieldName="column.fieldName"
                                :type="column.type" :defaultValue="updateItem[column.fieldName]||''"
                                :column="column"
                                :dataType="column.dataType"
                                @changeFieldValue="changeFieldValue"></CustomFormItem>
            </el-form>
        </div>
        <div slot="footer" class="slot_footer">
            <el-button @click="hideDialog">取 消</el-button>
            <el-button class="slot_footer_submit_btn" type="primary" @click="currentSubmit" :loading="loading">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import CustomFormItem from './CustomFormItem'

    export default {
        name: 'updateDialogForm',
        data() {
            return {
                formLabelWidth: '120px'
            }
        },
        props: {
            title: String,
            dialogFormVisible: Boolean,
            hideDialog: Function,
            submit: Function,
            columns: Array,
            updateItem: Object,
            form: Object,
            loading: Boolean,
            error: Boolean,
            width: {
                default: '50%'
            }
        },
        methods: {
            changeFieldValue(data) {
                this.form[data.fieldName] = data.value
            },
            currentSubmit() {
                this.$refs['updateDialogForm'].validate((valid) => {
                    if (valid) {
                        let formData = Object.assign({}, this.updateItem, this.form)
                        this.submit(formData)
                    } else {
                        return false
                    }
                })
            }
        },
        watch: {
            loading: function (n, o) {
                if (o && !n) {
                    if (this.error) {
                        this.$notify({
                            title: '提示',
                            message: '修改失败',
                            duration: 5000
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '修改成功',
                            duration: 5000
                        });
                        this.$refs['updateDialogForm'].resetFields()
                    }
                }
            }
        },
        components: {
            CustomFormItem
        }
    }
</script>
